<!DOCTYPE html>
<html>
<head>
    <title>编辑主题</title>
    {% include 'system/common/header.html' %}
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item layui-hide">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-block">
                    <input type="text" value="{{ theme.id }}" name="id" lay-verify="required" autocomplete="off" placeholder="主题编号" class="layui-input">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">主题名称</label>
                <div class="layui-input-block">
                    <input type="text" value="{{ theme.name or '' }}" name="name" lay-verify="required|themeName" autocomplete="off" placeholder="请输入主题名称（只能使用英文、数字和下划线，且不能以下划线开头和结尾）" class="layui-input">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">主题截图</label>
                <div class="layui-input-block">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <input type="text" name="screenshot" id="screenshot-url" placeholder="请输入图片地址或上传图片" value="{{ theme.screenshot or '' }}" class="layui-input">
                        </div>
                        <div class="layui-col-md6">
                            <button type="button" class="layui-btn layui-btn-primary" id="upload-screenshot">
                                <i class="layui-icon layui-icon-upload"></i> 上传图片
                            </button>
                            <button type="button" class="layui-btn layui-btn-normal" id="paste-screenshot-url">
                                <i class="layui-icon layui-icon-link"></i> 粘贴地址
                            </button>
                        </div>
                    </div>
                    <div id="screenshot-preview" style="margin-top: 10px; display: none;">
                        <img id="preview-img" src="" alt="截图预览" style="max-width: 300px; max-height: 200px; border: 1px solid #e6e6e6; border-radius: 2px;">
                        <div style="margin-top: 5px;">
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" id="remove-screenshot">
                                <i class="layui-icon layui-icon-close"></i> 移除图片
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">主题描述</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入主题描述" name="description" class="layui-textarea" style="height: 100px;">{{ theme.description or '' }}</textarea>
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">作者</label>
                <div class="layui-input-block">
                    <input type="text" value="{{ theme.author or '' }}" name="author" autocomplete="off" placeholder="请输入作者" class="layui-input">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">作者地址</label>
                <div class="layui-input-block">
                    <input type="text" value="{{ theme.author_and_uri or '' }}" name="author_and_uri" autocomplete="off" placeholder="请输入作者地址" class="layui-input">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">版本</label>
                <div class="layui-input-block">
                    <input type="text" value="{{ theme.version or '' }}" name="version" autocomplete="off" placeholder="请输入版本号" class="layui-input">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-block">
                    <input type="radio" name="active" value="1" title="启用" {% if theme.active == 1 %}checked{% endif %}>
                    <input type="radio" name="active" value="0" title="禁用" {% if theme.active == 0 %}checked{% endif %}>
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">是否有更新</label>
                <div class="layui-input-block">
                    <input type="radio" name="has_update" value="1" title="有更新" {% if theme.has_update == 1 %}checked{% endif %}>
                    <input type="radio" name="has_update" value="0" title="无更新" {% if theme.has_update == 0 %}checked{% endif %}>
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">更新地址</label>
                <div class="layui-input-block">
                    <input type="text" value="{{ theme.update_uri or '' }}" name="update_uri" autocomplete="off" placeholder="请输入更新地址" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="theme-update">
                <i class="layui-icon layui-icon-ok"></i>
                保存
            </button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="cancel">
                <i class="layui-icon layui-icon-close"></i>
                取消
            </button>
        </div>
    </div>
</form>

{% include 'system/common/footer.html' %}

<script>
layui.use(['form', 'jquery'], function() {
    let form = layui.form;
    let $ = layui.jquery;
    
    // 自定义验证规则：主题名称格式
    form.verify({
        themeName: function(value, item) {
            if (value && value.trim()) {
                var themeNamePattern = /^[a-zA-Z][a-zA-Z0-9_]*[a-zA-Z0-9]$/;
                if (!themeNamePattern.test(value.trim())) {
                    return '主题名称格式错误：只能使用英文、数字和下划线，且不能以下划线开头和结尾';
                }
            }
        }
    });
    
    // 初始化截图预览
    let initialScreenshot = $('#screenshot-url').val();
    if (initialScreenshot) {
        showScreenshotPreview(initialScreenshot);
    }
    
    // 上传截图
    $('#upload-screenshot').click(function() {
        // 创建一个隐藏的文件输入框
        let fileInput = $('<input type="file" accept="image/*" style="display: none;">');
        $('body').append(fileInput);
        
        fileInput.click();
        
        fileInput.on('change', function() {
            let file = this.files[0];
            if (file) {
                // 创建FormData对象
                let formData = new FormData();
                formData.append('image', file);
                formData.append('type', 'images');
                
                // 上传文件
                $.ajax({
                    url: '/admin/sys/themes/upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(result) {
                        if (result.errorCode === 0) {
                            let imageUrl = result.data.src;
                            $('#screenshot-url').val(imageUrl);
                            showScreenshotPreview(imageUrl);
                            layer.msg('图片上传成功', {icon: 1});
                        } else {
                            layer.msg(result.msg || '上传失败', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('上传失败', {icon: 2});
                    }
                });
            }
            
            // 移除临时文件输入框
            fileInput.remove();
        });
    });
    
    // 粘贴图片地址
    $('#paste-screenshot-url').click(function() {
        layer.prompt({
            title: '请输入图片地址',
            formType: 0,
            value: '',
            area: ['400px', '150px']
        }, function(value, index) {
            if (value && value.trim()) {
                $('#screenshot-url').val(value.trim());
                showScreenshotPreview(value.trim());
                layer.close(index);
                layer.msg('图片地址已设置', {icon: 1});
            } else {
                layer.msg('请输入有效的图片地址', {icon: 2});
            }
        });
    });
    
    // 移除截图
    $('#remove-screenshot').click(function() {
        $('#screenshot-url').val('');
        $('#screenshot-preview').hide();
        layer.msg('截图已移除', {icon: 1});
    });
    
    // 显示截图预览
    function showScreenshotPreview(imageUrl) {
        if (imageUrl && imageUrl.trim()) {
            $('#preview-img').attr('src', imageUrl);
            $('#screenshot-preview').show();
        } else {
            $('#screenshot-preview').hide();
        }
    }
    
    // 监听截图地址输入框变化
    $('#screenshot-url').on('input', function() {
        let imageUrl = $(this).val().trim();
        showScreenshotPreview(imageUrl);
    });
    
    // 表单提交
    form.on('submit(theme-update)', function(data) {
        console.log('表单提交数据:', data.field);
        
        let themeId = data.field.id;
        
        $.ajax({
            url: '/admin/sys/themes/update/' + themeId,
            data: JSON.stringify(data.field),
            dataType: 'json',
            contentType: 'application/json',
            type: 'post',
            success: function(result) {
                if (result.success) {
                    layer.msg(result.msg, {icon: 1, time: 1000}, function() {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        parent.layui.table.reload('themes-table');
                    });
                } else {
                    layer.msg(result.msg, {icon: 2, time: 2000});
                }
            },
            error: function(xhr, status, error) {
                layer.msg('更新失败: ' + error, {icon: 2, time: 2000});
            }
        });
        return false;
    });
    
    // 取消按钮
    $('#cancel').click(function() {
        parent.layer.close(parent.layer.getFrameIndex(window.name));
    });
});
</script>

</body>
</html> 